import React from 'react';
import createG2 from 'g2-react';
import { Frame } from 'g2';

class ChartOfPsNumOfCo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
    let frame = new Frame(this.state.data);
    frame = Frame.combinColumns(frame, ['count'], 'value', 'count', 'month');
    this.state = {
      data: frame,
    };
  }
  componentWillReceiveProps(nextProps) {
    let frame = new Frame(nextProps.data);
    frame = Frame.combinColumns(frame, ['count'], 'value', 'count', 'month');
    this.state = {
      data: frame,
    };
  }
  render() {
    const { data } = this.state;

    const Chart = createG2((chart) => {
      chart.col('month', {
        alias: '时间',
      });
      chart.col('value', {
        alias: '次数'
      });
      chart.axis('value', {
        grid: null,
        title: {
          fill: '#fff',
        },
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.axis('month', {
        title: null,
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.legend(false);
      chart.line()
        .position('month*value')
        .color('count', ['#ff7f0e'])
        .shape('spline')
        .size(2);
      chart.render();
    });

    return (
      <div style={{ paddingTop: 32 }} className="chart-item-wrap">
        <Chart
          data={data}
          width={500}
          height={300}
          forceFit
        />
      </div>
    );
  }
}

export default ChartOfPsNumOfCo;
